/**
 * @file filter
 * @author liyong18@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  PureComponent,
  PropTypes
} from 'react';
import * as pick from 'lodash/pick';
import * as omit from 'lodash/omit';
import * as assign from 'object-assign';
import {Renderer, renderChildren, filter} from '../renderer';
import * as cx from 'classnames';
import QuickEditable from '../hoc/quick-edit';
import PopOverAble from '../hoc/pop-over';
import DataTip from '../hoc/data-tip';
import Copyable from '../hoc/copyable';
const TDProps = ['className', 'style', 'onClick', 'onMouseEnter', 'onMouseLeave', 'onKeyDown', 'onKeyUp', 'onKeyPress'];

@Renderer({
  name: 'card-field',
  desc: '...',
  test: /(?:^|\/)(card|list-item)\/field$/
})
@QuickEditable({wrapper: 'div'})
@PopOverAble
@DataTip
@Copyable
export default class HTMLField extends PureComponent {
  static propTypes = {
    className: PropTypes.string,
    type: PropTypes.string.isRequired,
    placeholder: PropTypes.string,
    innerClassName: PropTypes.string
  };

  static defaultProps = {
    innerClassName: '',
    labelClassName: 'w-xxs'
  };

  render() {
    const {
      prefix,
      $path,
      affix,
      innerClassName,
      width,
      wrapperClassName,
      className,
      dataTip,
      label,
      labelClassName,
      filedClassName
    } = this.props;

    let tdProps = pick(this.props, TDProps);
    let rest = omit(this.props, TDProps);

    let style = this.props.style;

    if (width) {
      style = assign({}, style, {
        width
      });
    }

    if (!label) {
      return (
        <div {...tdProps} className={cx(className, filedClassName)}  style={style} data-tip={dataTip || null}>
          {prefix}
          {renderChildren($path, assign(rest, {
            className: innerClassName
          }))}
          {affix}
        </div>
      );
    }

    return (
      <div className={cx('hbox', 'm-b-xs','no-padder', wrapperClassName)}>
        <div className={cx('col', labelClassName)}>{label}</div>

        <div {...tdProps} className={cx('col', className, filedClassName)}  style={style} data-tip={dataTip || null}>
          {prefix}
          {renderChildren($path, assign(rest, {
            className: innerClassName
          }))}
          {affix}
        </div>
      </div>
    );
  }
}
